<template>
  <div>
    <el-table :data="merchants" stripe row-key="id">
      <el-table-column prop="storeName" label="商家名称"></el-table-column>
      <el-table-column prop="storePhone" label="商家电话"></el-table-column>
      <el-table-column prop="storeLogo" label="商家logo">
        <template v-slot="scope">
          <el-image :src="scope.row.storeLogo" style="width:50px;height:50px;" :preview-src-list="[scope.row.storeLogo]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="storeType" label="商家类型">
        <template v-slot="scope">
          <el-tag v-if="scope.row.storeType==1">汽车4s店</el-tag>
          <el-tag v-if="scope.row.storeType==2">汽车修理厂</el-tag>
          <el-tag v-if="scope.row.storeType==3">汽车美容店</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="masterName" label="负责人名称"></el-table-column>
      <el-table-column prop="masterPhone" label="负责人电话"></el-table-column>
      <!--<el-table-column prop="frontDoor" label="商家门头">
        <template v-slot="scope">
          <el-image :src="scope.row.frontDoor" style="width:50px;height:50px;"></el-image>
        </template>
      </el-table-column>-->
      <el-table-column prop="storeAddress" label="商家地址"></el-table-column>

      <!--<el-table-column prop="bizLicense" label="营业执照">
        <template v-slot="scope">
          <el-image :src="scope.row.bizLicense" style="width:50px;height:50px;"></el-image>
        </template>
      </el-table-column>-->

      <el-table-column prop="createDate" label="申请时间"></el-table-column>
      <el-table-column prop label="操作">
        <template v-slot="scope">
          <el-button size="mini" type="danger" @click="examineStore(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="商家审核" :visible.sync="centerDialogVisible" width="40%" center>


      <el-descriptions :border="true">
        <el-descriptions-item label="商家名称">{{newObj.storeName}}</el-descriptions-item>
        <el-descriptions-item label="商家类型">
          <el-tag v-if="newObj.storeType==1">汽车4s店</el-tag>
          <el-tag v-if="newObj.storeType==2">汽车修理厂</el-tag>
          <el-tag v-if="newObj.storeType==3">汽车美容店</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="商家logo"><el-image :src="newObj.storeLogo" style="width:50px;" fit="scale-down" :preview-src-list="[newObj.storeLogo]"></el-image></el-descriptions-item>
        <el-descriptions-item label="商家地址">{{newObj.province}}{{newObj.city}}{{newObj.town}}{{newObj.address}}</el-descriptions-item>
        <el-descriptions-item label="商家电话">{{newObj.storePhone}}</el-descriptions-item>
        <el-descriptions-item label="商家门头"><el-image  v-for="(item,index) in newObj.frontDoor" :key="index" :src="item" style="width:100px;" fit="scale-down" lazy :preview-src-list="newObj.frontDoor"></el-image></el-descriptions-item>
        <el-descriptions-item label="营业执照"><el-image  v-for="(item,index) in newObj.bizLicense" :key="index" :src="item" style="width:100px;" fit="scale-down" lazy :preview-src-list="newObj.bizLicense"></el-image></el-descriptions-item>
        <el-descriptions-item label="负责人姓名">{{newObj.masterName}}</el-descriptions-item>
        <el-descriptions-item label="负责人电话">{{newObj.masterPhone}}</el-descriptions-item>
        <el-descriptions-item label="业务员姓名">{{newObj.serveName}}</el-descriptions-item>
        <el-descriptions-item label="业务员电话">{{newObj.servePhone}}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{newObj.createDate}}</el-descriptions-item>
      </el-descriptions>

      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="rejectStore(newObj.id)">驳 回</el-button>
        <el-button type="primary" @click="passStore(newObj.id)">通 过</el-button>
      </span>
    </el-dialog>

    <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>
<script>
export default {
  inject: ["reload"],
  data: function() {
    return {
      merchants: [],
      centerDialogVisible: false,
      newObj:{},
      total: 0,
    };
  },
  async created() {
    this.handleCurrentChange(1);    
  },
  // async created() {
  //   const {data} = await this.$http.get(`/merchant/getVerifyMerchants`);
    
  //   if (data.code==1) {
  //     this.merchants=data.object;
  //   }else{
  //     this.$message({
  //         message:data.message,
  //         type: 'error'
  //       });
  //   }
  // },
  methods: {
    handleCurrentChange:async function(val){
      const {data} = await this.$http.get(`/merchant/getVerifyMerchants?pageNum=${val}&pageSize=10`);
  
      if (data.code==1) {
        this.merchants=[];
        data.object.list.forEach(merchant=>{
          merchant.allMoney=0;
          this.merchants.push(merchant);
        })      

        this.total = data.object.total;
      }else{
        this.$message({
            message:data.message,
            type: 'error'
          });
      }
    },
    examineStore: async function(obj) {
      this.newObj = obj;
      this.centerDialogVisible = true;
    },
    passStore: async function(id) {
      const { data } = await this.$http.post(`/merchant/verifyMerchant`, {id,type: 1});
      this.centerDialogVisible = false;
      this.$message.success("操作成功");
      this.reload();
    },
    rejectStore: async function(id) {
      const { data } = await this.$http.post(`/merchant/verifyMerchant`, {id,type: 2});
      this.centerDialogVisible = false;
      this.$message.success("操作成功");
      this.reload();
    }
  }
};
</script>
<style scoped>
  .el-form-item.show-pic .el-image{
    margin:0 10px;
  }
</style>